<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{width: 200px;height: 200px;background-color: red;position: absolute;left: 0;top: 0;}
    </style>
</head>
<body>
    事件绑定(事件侦听,或者事件监听)
    <div class="box"></div>
    <script>
        // 一.普通事件,也叫dom1级事件,一个元素对象上面只能绑定一个事件处理函数,下面的会覆盖掉上面的
        // document.onclick=function(){
        //     console.log("我是小坤坤");
        // }
        // document.onclick=function(){
        //     console.log("我是叶家佐");
        // }

        // 二,取消普通事件,将事件的结果赋值为null
        // document.onclick=function (){
        //     console.log("我是叶家佐");
        //   }
        //   document.onclick=null

        // 三.事件绑定 
        // 语法:元素.addEventListener('事件类型',事件处理函数,冒泡还是捕获事件)

        // 取消事件绑定的语法:元素.removeEventListener('事件类型',事件处理函数,冒泡还是捕获事件)
        // 备注:匿名函数无法进行比较

        // 绑定事件
        // document.addEventListener('click',function(){
        //     console.log("我是小坤坤");
        // })
        // document.addEventListener('click',function(){
        //     console.log("我是也就爱");
        // })

        // 取消 事件
        // document.removeEventListener('click',function(){
        //     console.log("1234563456");
        // })

    </script>

    四.事件绑定:dom2级事件,一个元素对象上可以绑定多个事件处理函数,顺序执行
    1.标准浏览器的事件绑定
    elementobj.addEventListener('事件类型',事件的处理函数,是否捕获)
    elementobj.removeEventListener('事件类型',事件的处理函数,是否捕获)
    参数1:事件类型,不带on
    参数2:事件的处理函数,函数名或者函数体
    参数3:是否捕获,可选地,捕获true,冒泡false

    <!-- 标准浏览器取消事件绑定 -->
    <script>
        // function kunkun(){
        //     console.log("我是坤坤");
        // }
        // function jiazuo(){
        //     console.log("我是佳作");
        // }
        // document.addEventListener('click',kunkun)
        // document.addEventListener('click',jiazuo)
        // document.removeEventListener('click',kunkun)
        // document.removeEventListener('click',jiazuo)
    </script>

    <!-- 拖拽效果 -->
    <script>
        var box=document.querySelector('.box');
        box.addEventListener('mousedown',function (e) {
            e= e|| event;
            var sx=e.offsetX;
            var sy=e.offsetY;
            // console.log(sx,sy);
            function move(e) {//事件处理函数
                e= e|| event;
                box.style.left=e.clientX-sx+"px";
                box.style.top=e.clientY-sy+"px";
            }
            document.addEventListener('mousemove',move);
            document.addEventListener('mouseup',function(){
                document.removeEventListener('mousemove',move);
            });
        })
    </script>
    





</body>
</html>